import React, { useState, useRef, useEffect } from "react";
import "./map.css";
import { Layout, Button, Modal, Input } from "antd";
import "antd/dist/antd.css";
import MapArea from "../../component/mapArea";
import treeData from "../../asset/data/treeInfo.json";

const { Header, Sider, Content } = Layout;

// 初始化state数据
function Mapp() {
  const [visible, setVisible] = useState(false);
  const [inputValue, setInputValue] = useState("");
  const [inputValue2, setInputValue2] = useState("");
  const [markerCoords, setMarkerCoords] = useState([]);
  const [selectedMarker, setSelectedMarker] = useState(null); // 子父组件通信
  const inputRef = useRef(null);

  useEffect(() => {
    if (visible && inputRef.current) {
      setTimeout(() => {
        inputRef.current.focus();
      }, 200); // 加入一点延迟
    }
  }, [visible]);

  // 两个输入框双向绑定
  const handleInputChange = (event) => {
    setInputValue(event.target.value);
  };

  const handleInputChange2 = (event) => {
    setInputValue2(event.target.value);
  };
  // 展示对话框
  const showModal = () => {
    setVisible(true);
  };

  const handleOk = () => {
    const lon = parseFloat(inputValue);
    const lat = parseFloat(inputValue2);
    if (!isNaN(lon) && !isNaN(lat)) {
      const newMarker = {
        lon,
        lat,
        title: `新标记 ${markerCoords.length + 1}`,
      };
      setMarkerCoords([...markerCoords, newMarker]);
    }
    // 输入框内容清空
    setInputValue("");
    setInputValue2("");
    setVisible(false);
  };

  const handleCancel = () => {
    setVisible(false);
  };

  const handleKeyDown = (event) => {
    if (event.key === "Enter") {
      event.preventDefault(); // 阻止默认行为
      handleOk();
    }
  };

  // 删除功能
  const del = () => {
    if (selectedMarker) {
      setMarkerCoords(
        markerCoords.filter((marker) => marker.title !== selectedMarker.title)
      );
      setSelectedMarker(null);
    }
  };

  return (
    <Layout>
      <Header>
        <Button type="primary" onClick={showModal} className="addBtn">
          添加标记📌
        </Button>
        <Modal
          title="放置坐标📌"
          visible={visible}
          onOk={handleOk}
          onCancel={handleCancel}
        >
          <Input
            ref={inputRef}
            type="text"
            placeholder="请输入经度"
            value={inputValue}
            onChange={handleInputChange}
            onKeyDown={handleKeyDown} // 键盘按下
          />
          <Input
            type="text"
            placeholder="请输入纬度"
            value={inputValue2}
            onChange={handleInputChange2}
            onKeyDown={handleKeyDown} // 键盘按下
          />
        </Modal>
        &emsp;
        <Button type="danger" onClick={del} className="delBtn">
          删除
        </Button>
      </Header>
      <Layout>
        <Content>
          {/* 父向子传递信息 */}
          <MapArea
            markerCoords={markerCoords}
            setSelectedMarker={setSelectedMarker}
            treeData={treeData}
            style={({ width: "100%" }, { height: "91vh" })}
          />
        </Content>
        <Sider>
          {selectedMarker ? (
            <div>
              <div className="detail">
                <b>详细信息</b>
              </div>
              <div>
                <p>景点: {selectedMarker.title}</p>
                <p>经度: {selectedMarker.lon.toFixed(2)}</p>
                <p>纬度: {selectedMarker.lat.toFixed(2)}</p>
                <p>
                  <p>
                    <b className="bottom">此处古树信息：</b>
                  </p>
                  {selectedMarker.name && <p>名称: {selectedMarker.name}</p>}
                  {selectedMarker.number && (
                    <p>编号: {selectedMarker.number}</p>
                  )}
                  {selectedMarker.age && <p>年龄: {selectedMarker.age}</p>}
                  {selectedMarker.type && <p>类别: {selectedMarker.type}</p>}
                </p>
              </div>
            </div>
          ) : (
            <div className="empty">请选择一个点</div>
          )}
        </Sider>
      </Layout>
    </Layout>
  );
}

export default Mapp;
